<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-03-12 11:00:20
 * @Description: file content
 * @FilePath: \ebook\src\components\common\Tipsmark.vue
-->
<template>
  <transition name="slide">
    <div class="tipsmark">
      <div class="tipsmark-bg"></div>
      <div class="tipsmark-wrapper">
        <div class="tipsmark-title">{{$t('shelf.tips')}}</div>
        <steps ref="stepsChild"></steps>
        <div class="tipsmark-contain-wrapper">
          <div v-if="stepsIndex == 0" class="tipsmark-contain">
            <div class="tipsmark-img-wrapper">
              <div class="tipsmark-img one"></div>
            </div>
            <div class="tipsmark-intro">
              <div class="tipsmark-intro-title">下一页</div>
              <div class="tipsmark-intro-text">竖起一根指头</div>
            </div>
          </div>
          <div v-if="stepsIndex == 1" class="tipsmark-contain">
            <div class="tipsmark-img-wrapper">
              <div class="tipsmark-img two"></div>
            </div>
            <div class="tipsmark-intro">
              <div class="tipsmark-intro-title">上一页</div>
              <div class="tipsmark-intro-text">竖起两根指头</div>
            </div>
          </div>
          <div v-if="stepsIndex == 2" class="tipsmark-contain">
            <div class="tipsmark-img-wrapper">
              <div class="tipsmark-img three">
              </div>
            </div>
            <div class="tipsmark-intro">
              <div class="tipsmark-intro-title">缩小字体</div>
              <div class="tipsmark-intro-text">竖起三根指头，比作“OK”</div>
            </div>
          </div>
          <div v-if="stepsIndex == 3" class="tipsmark-contain">
            <div class="tipsmark-img-wrapper">
              <div class="tipsmark-img five">
              </div>
            </div>
            <div class="tipsmark-intro">
              <div class="tipsmark-intro-title">放大字体</div>
              <div class="tipsmark-intro-text">张开手掌</div>
            </div>
          </div>
          <div class="tipsmark-contain-little">*该手势仅在阅读时生效</div>
        </div>
        <!--操作按钮-->
        <div class="tipsmark-button">
            <div @click="skip" :style="{'background-color':'#28698088'}">跳过</div>
            <div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
            <div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
            <div @click="skip" v-if="stepsIndex == 3">完成</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { storeShelfMixin } from '@/utils/mixin'
import Steps from './Steps.vue'
export default {
  components: { Steps },
  mixins: [storeShelfMixin],
  data () {
    return {
      // 新建任务
      stepsIndex: 0,
      stepsData: [
        { name: '第一步' },
        { name: '第二步' },
        { name: '第三步' },
        { name: '第四步' }
      ]
    }
  },
  methods: {
    skip () {
      this.setIsFirst(false)
      console.log(this.isFirst)
    },
    // 返回数据采集页面
    goback () {
      this.$parent.addTask = false
    },
    // 下一步
    prevSteps () {
      this.stepsIndex--
      this.$refs.stepsChild.stepsFun()
    },
    nextSteps () {
      this.stepsIndex++
      this.$refs.stepsChild.stepsFun()
    }
  }
}
</script>

<style lang="scss" scoped>
.tipsmark{
  .tipsmark-bg{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0000006c;
    z-index: 2000;
  }
  .tipsmark-wrapper{
    position: fixed;
    width: px2rem(380);
    height: px2rem(350);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color: #fff;
    z-index: 2001;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    .tipsmark-title{
      width: 100%;
      height: px2rem(60);
      line-height: px2rem(60);
      text-align: center;
      font-size: px2rem(30);
      font-weight: 500;
    }
    .tipsmark-contain-wrapper{
      width: 100%;
      height:px2rem(220);
      position: relative;
      .tipsmark-contain{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #2869801c;
        .tipsmark-img-wrapper{
          flex: 1;
          height: 100%;
          .tipsmark-img{
            width: 90%;
            height: 90%;
            &.one{
              background: url("../../assets/images/oneGesture.png") no-repeat center;
              background-size: contain;
            }
            &.two{
              background: url("../../assets/images/twoGesture.png") no-repeat center;
              background-size: contain;
            }
            &.three{
              background: url("../../assets/images/threeGesture1.png") no-repeat center;
              background-size: contain;
            }
            &.five{
              background: url("../../assets/images/fiveGesture.png") no-repeat center;
              background-size: contain;
            }
          }
        }
        .tipsmark-intro{
          flex: 1;
          .tipsmark-intro-title{
            font-weight: 500;
            font-size: px2rem(30);
          }
          .tipsmark-intro-text{
            font-weight: 300;
            margin-top: px2rem(20);
            font-size: px2rem(20);
            color: #666;
          }
        }
      }
      .tipsmark-contain-little{
        position: absolute;
        right: px2rem(7);
        bottom: px2rem(7);
        z-index: 2002;
        font-size: px2rem(10);
        color: #e75151bb;
      }
    }
    .tipsmark-button{
      display: flex;
      justify-content: center;
      div{
        font-size: px2rem(12);
        padding: px2rem(10);
        background: #286980;
        margin: px2rem(10);
        border-radius:px2rem(4);
        cursor:pointer;
        color:#ffffff;
      }
    }
  }
}

</style>
